import React, { useState } from 'react';
import { LaptopOutlined, DatabaseOutlined, UserOutlined, AreaChartOutlined, VideoCameraOutlined, AppstoreOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import AvatarDropDown from './component/avatarDropDown';
import menuMockList from './mockData/menuList.json'; // 菜单数据 TODO 后期优化为后端获取
import { Outlet, useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

const menuList = Object.entries(menuMockList.data)

// 创建图标映射表：字符串 → 图标组件（键与后端返回的 icon 严格一致）
const IconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  DatabaseOutlined: DatabaseOutlined,
  LaptopOutlined: LaptopOutlined,
  UserOutlined: UserOutlined,
  AreaChartOutlined:AreaChartOutlined,
  VideoCameraOutlined: VideoCameraOutlined,
  AppstoreOutlined: AppstoreOutlined
};

// 综合地质预报、风险动态评估、施工动态监测、智能爆破设计、动态支护设计、结构质量检测、系统账号管理
let topMenu: MenuProps['items'] = [];

const AdminPage: React.FC = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const [ asideMenu, setAsideMenu ] = useState([
        {
            key: '/admin',
            icon: <DatabaseOutlined />,
            label: '大数据统计分析'
        },
        {
            key: '/admin/timeAnnouncementNotification',
            icon: <LaptopOutlined />,
            label: '实时公告通知'
        },
        {
            key: 'aside13',
            icon: <AreaChartOutlined />,
            label: '位移信息'
        },
        {
            key: 'aside14',
            icon: <AreaChartOutlined />,
            label: '渗水压力信息'
        },
        {
            key: 'aside15',
            icon: <AreaChartOutlined />,
            label: '应力信息'
        },
        {
            key: 'aside16',
            icon: <VideoCameraOutlined />,
            label: '视频监控'
        },
        {
            key: 'aside17',
            icon: <AppstoreOutlined />,
            label: '其它',
            children: [
                { key: '171', label: '大屏预览' }
            ]
        },
    ]);

    const navigate = useNavigate();

    // 获取顶部菜单数据
    topMenu = menuList.map(([modelKey, modelVal]) => ({
        key: modelVal.key,
        label: modelVal.menuName,
        name: modelKey
    }));

    // 顶部菜单点击回调函数
    const topMenuOnClick: MenuProps['onClick'] = (e) => { 
        for(const [key, value] of menuList) {
            if(key && e.key === value.key) {
                const newMenu = value.menuList.map(item => { 
                    const IconComponent = IconMap[item.icon] || (() => <span />);
                    return {
                        key: item.key,
                        icon: <IconComponent />, 
                        label: item.label,
                        children: item.children
                    };
                })
                setAsideMenu(newMenu)
            }
        }
    };

    // 侧边菜单栏回调函数
    const asideMenuOnclick = (e: any) => {
        navigate(e.key);
    };

    return (
        <Layout style={{ height: '100vh', overflow: 'hidden' }}>
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ width: '150px', height:'64px' }}>
                    <h2 style={{ color: 'white' }}>齐鲁交通学院</h2>
                </div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['top0']}
                    items={topMenu}
                    onClick={ topMenuOnClick }
                    style={{ flex: 1, minWidth: 0 }}
                />
                <div style={{ color: 'white' }}>
                    <AvatarDropDown></AvatarDropDown>
                </div>
            </Header>

            <Layout>
                <Sider width={200} style={{ background: colorBgContainer, overflow: 'auto', scrollbarWidth: 'thin' }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['aside1']}
                        defaultOpenKeys={['aside1']}
                        style={{ height: '100%', borderInlineEnd: 0 }}
                        onClick={ asideMenuOnclick }
                        items={asideMenu}
                    />
                </Sider>
                <Layout style={{ padding: '0 0 10px 12px' }}>
                    <Breadcrumb
                        items={[{ title: '大屏总览管理' }, { title: '大数据统计分析' }]}
                        style={{ margin: '8px 0' }}
                    />

                    <Content style={{ overflow: 'auto', scrollbarWidth: 'thin' }}>
                        <div
                            style={{
                                padding: 0,
                                minHeight: 'calc(100vh - 126px)',
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                                backgroundColor: '#f5f5f5'
                            }}
                        >
                            <Outlet /> {/* 子路由组件将在这里渲染 */}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default AdminPage;